<template>
  <div class="app-container">
    <el-card v-show="!showDetail" class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :model="listQuery" inline>
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="listQuery.start_time"
                placeholder="选择开始时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="listQuery.end_time"
                placeholder="选择结束时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="房间id">
              <el-input v-model="listQuery.room_id" clearable></el-input>
            </el-form-item>
            <el-form-item label="是否新注册">
              <el-radio v-model="listQuery.is_new_user" :label="1">是</el-radio>
              <el-radio v-model="listQuery.is_new_user" :label="0">否</el-radio>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="deBounceWrap(handleSearch)"
              >搜索
              </el-button
              >
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <el-table v-if="show" :data="tableData" border style="width: 100%">
        <el-table-column label="房间ID" prop="room_id"></el-table-column>
        <el-table-column label="房间名称" prop="room_name"></el-table-column>
        <el-table-column
          label="进房人数"
          prop="into_room_user_num"
        ></el-table-column>
        <el-table-column
          label="充值人数"
          prop="into_room_recharge_user_num"
        ></el-table-column>
        <el-table-column
          label="时间段内送礼(回声币)"
          prop="give_gift_gold_total"
        ></el-table-column>
        <el-table-column
          label="时间段内充值"
          prop="into_room_user_current_recharge_total"
        ></el-table-column>

        <el-table-column
          label="3日内送礼（回声币）"
          prop="give_gift_three_days_gold_total"
        ></el-table-column>
        <el-table-column
          label="3日内充值（元）"
          prop="into_room_user_current_three_days_recharge_total"
        ></el-table-column>
        <el-table-column
          label="7日内送礼（回声币）"
          prop="give_gift_seven_days_gold_total"
        ></el-table-column>
        <el-table-column
          label="7日内充值（元）"
          prop="into_room_user_current_seven_days_recharge_total"
        ></el-table-column>
        
        <el-table-column
          label="充值总额"
          prop="into_room_user_history_recharge_total"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleDetail">
              查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card v-show="showDetail">
      <div slot="header" class="clearfix">
        <el-row>
          <el-form :model="listQuery" inline>
            <el-form-item label="日期范围">
              <el-date-picker
                v-model="listQuery.start_time"
                disabled
                placeholder="选择开始时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="">
              <el-date-picker
                v-model="listQuery.end_time"
                disabled
                placeholder="选择结束时间"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="房间id">
              <el-input
                v-model="listQuery.room_id"
                clearable
                disabled
              ></el-input>
            </el-form-item>
            <el-form-item label="是否新注册">
              <el-radio v-model="listQuery.is_new_user" :label="1" disabled>
                是
              </el-radio>
              <el-radio v-model="listQuery.is_new_user" :label="0" disabled>
                否
              </el-radio>
            </el-form-item>
            <el-form-item label="是否充值用户">
              <el-radio v-model="listQuery.is_recharge_user" :label="1">
                是
              </el-radio>
              <el-radio v-model="listQuery.is_recharge_user" :label="0">
                否
              </el-radio>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="deBounceWrap(handleDetail)"
              >搜索
              </el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-download"
                type="primary"
                @click="deBounceWrap(handleExport)"
              >导出
              </el-button
              >
            </el-form-item>
            <el-form-item>
              <el-button type="danger" @click="showDetail = false">
                返回
              </el-button>
            </el-form-item>
          </el-form>
        </el-row>
      </div>
      <el-table :data="detailData" border style="width: 100%">
        <el-table-column label="房间ID" prop="room_id"></el-table-column>
        <el-table-column label="用户ID" prop="user_code"></el-table-column>
        <el-table-column label="用户昵称" prop="nickname"></el-table-column>
        <el-table-column
          label="充值金额(元)"
          prop="history_recharge_total"
        ></el-table-column>
        <el-table-column
          label="当前时间段内充值金额(元)"
          prop="current_recharge_total"
        ></el-table-column>
        <el-table-column
          label="离线时长"
          prop="off_line_duration"
        ></el-table-column>
        <el-table-column
          label="最后登录时间"
          prop="last_login_time"
        ></el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
import { intoRoom, intoRoomDetail, intoRoomExport } from '@/api/room/enterStatistics'

export default {
  data() {
    return {
      listQuery: {
        start_time: undefined,
        end_time: undefined,
        room_id: undefined,
        is_new_user: 1,
        is_recharge_user: 1
      },
      tableData: [],
      show: false,
      detailData: [],
      showDetail: false
    }
  },
  created() {
    // this.getIntoRoom()
  },
  methods: {
    getIntoRoom() {
      let data = {
        start_time: this.listQuery.start_time,
        end_time: this.listQuery.end_time,
        room_id: this.listQuery.room_id,
        is_new_user: this.listQuery.is_new_user
      }
      intoRoom(data).then(({ data }) => {
        this.tableData = [data]
      })
    },
    handleSearch() {
      if (this.listQuery.start_time > this.listQuery.end_time) {
        this.$message({
          message: '请输入正确的时间',
          type: 'warning'
        })
        return
      }
      this.show = true
      this.getIntoRoom()
    },
    handleDetail() {
      intoRoomDetail(this.listQuery).then(res => {
        this.showDetail = true
        this.detailData = res.data
      })
    },
    handleExport() {
      intoRoomExport(this.listQuery).then(res => {
        location.href = res.data.download_url
      })
    }
  }
}
</script>
<style scoped></style>
